<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-select
            :disabled="item.disabled"
            :clearable="item.clearable"
            :multiple="item.multiple"
            :multiple-limit="item.multipleLimit"
            :filterable="item.filterable"
            :collapse-tags="item.collapseTags"
            :allow-create="item.allowCreate"
            :default-first-option="item.defaultFirstOption"
            :name="item.name"
            :autocomplete="item.autocomplete"
            :size="item.size | setSize(item.size)"
            :no-match-text="item.noMatchText"
            :no-data-text="item.noDataText"
            :popper-class="item.popperClass"
            :reserve-keyword="item.reservekeyword"
            :value-key="item.valueKey"
            :popper-append-to-body="item.popperAppendToBody"
            :automatic-dropdown="item.automaticDropdown"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :class="item.class"
            @change="onSelectChange"
            @visible-change="onSelectVisibleChange"
            @remove-tag="onSelectRemoveTag"
            @clear="onSelectclear"
            @blur="onSelectblur"
            @focus="onSelectfocus"
        >
            <template v-if="item.isGroup">
                <el-option-group
                    v-for="(sitem, index) in item.options"
                    :key="index"
                    :label="sitem.label"
                >
                    <el-option
                        v-for="(titem, index) in sitem.options"
                        :key="index"
                        :label="titem.label"
                        :value="titem.value"
                    />
                </el-option-group>
            </template>

            <el-option
                v-else
                v-for="(sitem, index) in item.options"
                :key="index"
                :label="sitem.label"
                :value="sitem.value"
                :disabled="sitem.disabled"
            />
        </el-select>
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-select',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单
                     * @type Boolean
                     * @value Boolean
                     */
                    automaticDropdown: '',
                    /**
                     * 是否将弹出框插入至 body 元素
                     * @type Boolean
                     * @value Boolean
                     */
                    popperAppendToBody: true,
                    /**
                     * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
                     * @type Boolean
                     * @value Boolean
                     */
                    reservekeyword: '',
                    /**
                     * Select 下拉框的类名
                     * @type String
                     * @value String
                     */
                    popperClass: '',
                    /**
                     * 选项为空时显示的文字
                     * @type String
                     * @value String
                     */
                    noDataText: '',
                    /**
                     * 搜索条件无匹配时显示的文字
                     * @type String
                     * @value String
                     */
                    noMatchText: '',
                    /**
                     * select input 的 autocomplete 属性
                     * @type String
                     * @value String
                     */
                    autocomplete: '',
                    /**
                     * select input 的 name 属性
                     * @type String
                     * @value String
                     */
                    name: '',
                    /**
                     * 是否可选择
                     * @type Boolean
                     * @value Boolean
                     */
                    disabled: false,
                    /**
                     * 是否可清除全部项
                     * @type Boolean
                     * @value Boolean
                     */
                    clearable: false,
                    /**
                     * 是否多选
                     * @type Boolean
                     * @value Boolean
                     */
                    multiple: false,
                    /**
                     * 多选时用户最多可以选择的项目数,为 0 则不限制
                     * @type Number
                     * @value Number
                     */
                    multipleLimit: 0,
                    /**
                     * 是否可清除单个项
                     * @type Boolean
                     * @value Boolean
                     */
                    collapseTags: false,
                    /**
                     * 是否可搜索
                     * @type Boolean
                     * @value Boolean
                     */
                    filterable: false,
                    /**
                     * 是否可通过在输入框中输入文字来创建新的条目, 使用时filterable必须传true,否则不生效!!!
                     * @type Boolean
                     * @value Boolean
                     */
                    allowCreate: false,
                    /**
                     * 是否可按下回车选中当前选项列表中的第一个选项
                     * @type Boolean
                     * @value Boolean
                     */
                    defaultFirstOption: false,
                    /**
                     * 作为 value 唯一标识的键名，绑定值为对象类型时必填
                     * @type string
                     * @value 'value'
                     */
                    valueKey: 'value',
                    /**
                     *
                     * @type String
                     * @value ""
                     */
                    placeholder: '请选择内容',
                    /**
                     * 自定义下拉框类名
                     * @type string
                     * @value 'red'
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 选中值发生变化时触发
         * @param 目前的选中值
         */
        onSelectChange(data) {
            this.dispatch('baseForm', 'onSelectChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 下拉框出现/隐藏时触发
         * @param 出现则为 true，隐藏则为 false
         */
        onSelectVisibleChange(data) {
            this.dispatch('baseForm', 'onSelectVisibleChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 多选模式下移除tag时触发
         * @param 移除的tag值
         */
        onSelectRemoveTag(data) {
            this.dispatch('baseForm', 'onSelectRemoveTag', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 可清空的单选模式下用户点击清空按钮时触发
         */
        onSelectclear() {
            this.dispatch('baseForm', 'onSelectclear', { prop: this.item.prop })
        },
        /**
         * 当 input 失去焦点时触发
         * @param (event: Event)
         */
        onSelectblur(event) {
            this.dispatch('baseForm', 'onSelectblur', {
                event,
                prop: this.item.prop
            })
        },
        /**
         * 当 input 失去焦点时触发
         * @param (event: Event)
         */
        onSelectfocus(event) {
            this.dispatch('baseForm', 'onSelectfocus', {
                event,
                prop: this.item.prop
            })
        }
    }
}
</script>
